<template>
	<div>
		<!-- 数据操作 -->
		<div>
			<el-form :inline="true" class="demo-form-inline">
				<el-button type="primary" @click="openDialog('addProductDialog')" v-if="roleActionInfoList.productListMenu.tw_product_add_action">添加产品</el-button>
			</el-form>
		</div>

		<!-- 数据列表 -->
		<div>
			<el-table :data="tableList.productList" style="width: 100%" border v-loading.body="loading">
			      <el-table-column type="index" width="70"></el-table-column>
			      <el-table-column prop="product_name" label="产品名称"></el-table-column>
			      <el-table-column prop="product_type" label="产品类别" :formatter="productType"></el-table-column>
			      <el-table-column label="操作">
				      <template scope="scope">
							<!-- 查看按钮 -->
			        		<el-button size="small" type="info" icon="view" @click="editRow(scope.$index,scope.row,'showProductDialog')"></el-button>
							
							<!-- 审核过后的编辑 -->
			        		<el-button size="small" type="info" icon="edit" v-if="scope.row.is_checked == 1" @click="editRow(scope.$index,scope.row,'editCheckedProductDialog')"></el-button>

							<!-- 原始编辑 -->
			        		<el-button size="small" type="info" icon="edit" @click="editRow(scope.$index, scope.row,'editProductDialog')" v-if="roleActionInfoList.productListMenu.tw_product_edit_action && scope.row.is_checked == 0" ></el-button>
							<!-- 历史记录 -->
			        		<el-button size="small" type="info" @click="editRow(scope.$index, scope.row,'editProductLogDialog')" v-if="roleActionInfoList.productListMenu.tw_product_history_look_action" icon="time"></el-button>

							<!-- 审核 -->
			        		<el-button size="small" type="warning" v-if="scope.row.is_checked == 0" @click="editRow(scope.$index,scope.row,'checkProductDialog')">审核</el-button>
	
							<!-- 删除 -->
			        		<el-button size="small" type="danger" icon="delete" @click="editRow(scope.$index, scope.row,'delProductDialog')" v-if="roleActionInfoList.productListMenu.tw_product_del_action"></el-button>
				        	
				      </template>
				    </el-table-column>

		    </el-table>
		</div>

		
		<!-- 添加产品对话框 -->
		<el-dialog title="添加产品" :visible.sync="dialog.addProductDialog.open"  v-if="dialog.addProductDialog.open" size="full">
			<addForm @closeDialog="closeDialog('addProductDialog')" @freshList="getProductList" :formTplId="productFormTplId" :requestUrl="addProductInfoUrl" :configGetFormParamListUrl="configGetFormParamListUrl"></addForm>
		</el-dialog>
		<!-- 修改产品对话框 -->
		<el-dialog title="修改产品信息" :visible.sync="dialog.editProductDialog.open"  v-if="dialog.editProductDialog.open" size="full">
			<editForm @closeDialog="closeDialog('editProductDialog')" @freshList="getProductList" :formTplId="productFormTplId" :formTplValueId="formTplValueId" :requestUrl="editProductInfoUrl" :getFormValueInfoUrl="getProductInfoUrl"></editForm>
		</el-dialog>
		<!-- 重新修改产品对话框 -->
		<el-dialog title="修改产品信息" :visible.sync="dialog.editCheckedProductDialog.open"  v-if="dialog.editCheckedProductDialog.open" size="full">
			<editForm @closeDialog="closeDialog('editCheckedProductDialog')" @freshList="getProductList" :formTplId="productFormTplId" :formTplValueId="formTplValueId" :requestUrl="editProductInfoUrl" :getFormValueInfoUrl="getProductInfoUrl" :editChecked="true"></editForm>
		</el-dialog>

		<!-- 修改产品历史对话框 -->
		<el-dialog title="修改产品信息历史" :visible.sync="dialog.editProductLogDialog.open"  v-if="dialog.editProductLogDialog.open" size="full">
			<editLogForm @closeDialog="closeDialog('editProductLogDialog')" @freshList="getProductList" :formTplId="productFormTplId" :formTplValueId="formTplValueId" :requestUrl="editProductInfoUrl" ></editLogForm>
		</el-dialog>
		<!-- 删除字段对话框 -->
		<el-dialog title="删除提示" :visible.sync="dialog.delProductDialog.open" size="tiny">
		  <span>确定要删除此条数据吗?</span>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="closeDialog('delProductDialog')">取 消</el-button>
		    <el-button type="primary" @click="dialogOkBtn('delProductDialog')">确 定</el-button>
		  </span>
		</el-dialog>

		<!-- 审核对话框 -->
		<el-dialog title="审核提示" :visible.sync="dialog.checkProductDialog.open" size="tiny">
		  <span>确定审核通过该数据吗?审核通过之后，该数据将正式上线对外展示</span>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="closeDialog('checkProductDialog')">取 消</el-button>
		    <el-button type="primary" @click="dialogOkBtn('checkProductDialog')">确 定</el-button>
		  </span>
		</el-dialog>
		
		<!-- 查看产品对话框 -->
		<el-dialog title="查看产品信息" :visible.sync="dialog.showProductDialog.open"  v-if="dialog.showProductDialog.open" size="full">
			<showForm @closeDialog="closeDialog('showProductDialog')" :formTplId="productFormTplId" :formTplValueId="formTplValueId" :getFormValueInfoUrl="getProductInfoUrl"></showForm>
		</el-dialog>



	</div>
</template>

<script>
import _roleAction from '../../common/roleAction.vue'
import _http from '../../common/http.vue'
import _param from '../../common/param.vue'
import addForm from '../../common/addForm.vue'
import editForm from '../../common/editForm.vue'
import editLogForm from '../../common/editLogForm.vue'
import showForm from '../../common/showForm.vue'

export default{
	components:{addForm,editForm,editLogForm,showForm},
	data(){
		return{
        	roleActionInfoList:_roleAction.getRoleActionFlag(this,'productListMenu'),
			loading:false,
			productFormTplId:_param.param.productFormId,
			configGetFormParamListUrl:_param.param.configGetFormParamListUrl,
			formTplValueId:0,
			addProductInfoUrl:'addProductInfo',
			editProductInfoUrl:'editProductInfo',
			getProductInfoUrl:'getProductInfo',
			dialog:{
				addProductDialog:{
					open:false
				},
				editProductDialog:{
					open:false
				},
				editProductLogDialog:{
					open:false
				},
				delProductDialog:{
					open:false
				},
				checkProductDialog:{
					open:false
				},
				editCheckedProductDialog:{
					open:false
				},
				showProductDialog:{
					open:false
				}
			},
			tableList:{
				productList:[]
			},
			dicList:{},
			form:{
				delFormInfo:{
					id:0
				},
				checkFormInfo:{
					id:0
				}
			}

		}
	},
	mounted(){
		this.loading = true
		this.getDicList()
	},
	methods:{
		openDialog(dialog){
			this.dialog[dialog].open = true
		},
		closeDialog(dialog){
			this.dialog[dialog].open = false
		},
		editRow(index,row,dialog){
			if (dialog == 'editProductDialog') {
				this.formTplValueId = row.id
			}else if(dialog == 'editProductLogDialog'){
				this.formTplValueId = row.id
			}else if(dialog == 'delProductDialog'){
				this.form.delFormInfo.id = row.id
			}else if(dialog == 'checkProductDialog'){
				this.form.checkFormInfo.id= row.id
			}else if(dialog == 'editCheckedProductDialog'){
				this.formTplValueId = row.id
			}else if(dialog == 'showProductDialog'){
				this.formTplValueId = row.id
			}
			this.openDialog(dialog)
		},
		getProductList(){
			_http.axiosRequest(this,'getProductList',{formId:this.productFormTplId},(res)=>{
				this.tableList.productList = res.data
				this.loading = false
    		})
		},
		getDicList(){
			_http.axiosRequest(this,'getDicList',{formId:this.productFormTplId},(res)=>{
				this.dicList = res.data
				this.getProductList()
			})
		},
		productType(row,column){
			return this.dicList['product_type'][row.product_type]['label']
		},
		dialogOkBtn(dialog){
			if (dialog == 'delProductDialog') {
				this.delProduct(dialog)
			}else if(dialog == 'checkProductDialog'){
				this.checkProduct(dialog)
			}
		},
		delProduct(dialog){
			_http.axiosRequest(this,'delProductInfo',{id:this.form.delFormInfo.id},(res)=>{
				if (_http.apiResult(this,res.data)) {
					this.getProductList()
					this.closeDialog(dialog)
				}
    		})
		},
		checkProduct(dialog){
			_http.axiosRequest(this,'checkProductInfo',{id:this.form.checkFormInfo.id},(res)=>{
				if (_http.apiResult(this,res.data)) {
					this.getProductList()
					this.closeDialog(dialog)
				}
			})
		}
	}
}	
</script>